<template>
	<div>
		<HeaderComp />
		<div v-show="isShowLogin" class="user-login">
			<div class="login-way">
				<span
					:class="isChangeColor === 1 ? 'tip-color' : ''"
					@click="passwordLogin"
					>密码登录</span
				>
				<span class="shuxian">|</span>
				<span
					:class="isChangeColor === 2 ? 'tip-color' : ''"
					@click="messageLogin"
					>短信登录</span
				>
			</div>
			<div class="password-login" v-show="isPassword">
				<form class="password-form">
					<div class="password-input">
						<div class="password">
							<span>账号</span>
							<input type="text" placeholder="请输入账号" />
						</div>
						<div class="password">
							<span>密码</span>
							<input type="password" placeholder="请输入密码" />
						</div>
					</div>
					<div class="password-button">
						<button class="register-button">注册</button>
						<button class="login-button">登录</button>
					</div>
				</form>
			</div>
			<div class="message-login" v-show="isMessage">
				<form>
					<span>+86</span><input type="text" /> <span>验证码</span
					><input type="password" /><span>获取验证码</span>
					<button>登录/注册</button>
				</form>
			</div>
			<div class="login-word">
				<span>未注册过哔哩哔哩的手机号，我们将自动帮你注册账号</span>
				<span
					>登录或完成注册即代表你同意 <a href="#">用户协议</a>和
					<a href="#">隐私政策</a>
				</span>
			</div>
		</div>
		<FooterComp />
	</div>
</template>
<script>
import HeaderComp from "../../components/header";
import FooterComp from "../../components/footer";
export default {
	name: "LoginComp",
	components: {
		HeaderComp,
		FooterComp,
	},
	watch: {},
};
</script>
<style></style>
